<!DOCTYPE html>
<html lang="en" style="background-color: #F5F5F5;">
<head>
	<meta charset="UTF-8">
	<title>仿小米商城-小米8</title>
	<link href="./images/mi.ico" rel="icon" type="image/x-icon"/>
	<script type="text/javascript" src="./jQuery/jquery-3.1.0.min.js"></script>
	<script>
		$(function(){
               //获取购物车鼠标移入事件
               $("div.site-topbar-right ul li.gou").mouseover(function(){
                    //将其垂直高度设为0；显示当前的
                    $("div.site-topbar-right-gou").css({"z-index":1});
                    $("div.site-topbar-right-gou").show();
               });
            });
		$(function(){
               //获取购物车鼠标移出弹出层事件
               $("div.site-topbar-right-gou").mouseout(function(){
                    //隐藏当前的
                    $("div.site-topbar-right-gou").hide();
               });
            });
		$(function(){
               //获取商品顶部鼠标移入事件
               $("div.header1 ul li").mouseover(function(){
                    //将其垂直高度设为0；显示当前的
                    $("div.header1-1").css({"z-index":2});
                    $("div.header1-1").show();
               });
            });
		$(function(){
               //获取商品顶部鼠标移出弹出层事件
               $("div.header1-1").mouseleave(function(){
                    //隐藏当前的
                    $("div.header1-1").hide();
               });
            });
	</script>

	<script type="text/javascript">
		//轮播js
	    var t = n =0, count;
	    $(document).ready(function(){ 
	    count=$("#banner_list1 a").length;
	    $("#banner_list1 a:not(:first-child)").hide();
	    $("#banner1 li").click(function() {
	    var i = $(this).text() -1;//获取Li元素内的值，即1，2，3，4
	    n = i;
	    if (i >= count) return;
	    $("#banner_list1 a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
	    document.getElementById("banner1").style.background="";
	    $(this).toggleClass("on");
	    $(this).siblings().removeAttr("class");
	    });
	    t = setInterval("showAuto()", 4000);
	    $("#banner1").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
	    })

	    function showAuto()
	      {
	      n = n >=(count -1) ?0 : ++n;
	      $("#banner1 li").eq(n).trigger('click');
	      }
  	</script>
  	<script type="text/javascript">
		//轮播2js
	    var t = n =0, count;
	    $(document).ready(function(){ 
	    count=$("#banner_list2 a").length;
	    $("#banner_list2 a:not(:first-child)").hide();
	    $("#banner2 li").click(function() {
	    var i = $(this).text() -1;//获取Li元素内的值，即1，2，3，4
	    n = i;
	    if (i >= count) return;
	    $("#banner_list2 a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
	    document.getElementById("banner2").style.background="";
	    $(this).toggleClass("on");
	    $(this).siblings().removeAttr("class");
	    });
	    t = setInterval("showAuto()", 4000);
	    $("#banner2").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
	    })

	    function showAuto()
	      {
	      n = n >=(count -1) ?0 : ++n;
	      $("#banner2 li").eq(n).trigger('click');
	      }
  	</script>

	<style type="text/css">
		/*公共css样式*/
		div,ul,li,h1,h2,h3,h4,h5,h6,a,span{margin: 0px;padding: 0px;}
		ul{list-style: none;}
		a{text-decoration: none;color: black;}

		body{width: 1226px;margin:0px auto;background-color: #fff;}
		div.site-bn-bar{width: 100%;height: 100px;background-color: #DD343B;}
		div.site-bn-bar ul li{width: 100%;line-height: 100px;}
		div.site-bn-bar ul li a{width: 100%;color:#fff;text-decoration:none;text-align: center;font-size: 50px;display: block;}
		/*导航条*/
		div.site-topbar{width: 100%;height: 40px;background-color: #333333;}
		div.site-topbar-left{width: 50%;height: 40px;float: left;margin-left: 40px;}
		
		div.site-topbar-left ul li{width: 60px;float: left;line-height: 40px;padding-left: 15px;}
		div.site-topbar-left ul li.lot{width: 30px;float: left;line-height: 40px;padding-left: 15px;}
		div.site-topbar-left ul li.miu{width: 40px;float: left;line-height: 40px;padding-left: 15px;}
		div.site-topbar-left ul li.yun{width: 40px;float: left;line-height: 40px;padding-left: 15px;}
		div.site-topbar-left ul li.jin{width: 30px;float: left;line-height: 40px;padding-left: 15px;}
		div.site-topbar-left ul li.you{width: 30px;float: left;line-height: 40px;padding-left: 15px;}
		div.site-topbar-left ul li a{width: 60px;color:#7D7D7D;text-decoration:none;text-align: center;font-size: 10px;}
		div.site-topbar-left ul li a:hover{color:#fff;}
		
		div.site-topbar-right{width: 23%;height: 40px;float: right;margin-right: 40px;}
		div.site-topbar-right ul li{width: 40px;float: left;line-height: 40px;padding-left: 15px;}
		div.site-topbar-right ul li.gou{width: 100px;float: right;line-height: 40px;padding-left: 15px;}
		div.site-topbar-right ul li.gou:hover{background-color: #fff;}
		div.site-topbar-right ul li.gou a:hover{color:red;}
		div.site-topbar-right ul li a{width: 60px;color:#7D7D7D;text-decoration:none;text-align: center;font-size: 10px;}
		div.site-topbar-right ul li a:hover{color:#fff;}
		div.site-topbar-right ul li img{margin: 10px;float: left;}
		div.site-topbar-right-gou{width:280px;height:100px;border:1px solid #ddd;float:right;margin-right: 40px;display: none;line-height: 100px;text-align: center;font-size: 10px;background-color: #fff;position: absolute;right:40px;margin-top:40px;z-index: -1;}
		div.site-topbar-right-gou.gou2{display: none;height: 100px;}
		/*商品导航条*/
		div.site-header{width: 100%;height: 100px;background-color: #fff;background: url("./images/search.png") no-repeat 1145px 35px;}
		div.header0{width: 5%;height: 100px;margin-left: 5%;float: left;}
		div.header0 img{padding-top: 25px;}
		div.header1{width: 60%;height: 100px;margin-left: 5%;float: left;}
		div.header1 ul li{width: 50px;float: left;padding-left: 10px;line-height: 100px;}
		div.header1 ul li.hard{width: 60px;}
		div.header1 ul li a{font-size: 15px;text-decoration: none;color: black;}
		div.header1 ul li a:hover{color: red;}
		/*搜索框*/
		div.header2{width:15%;height: 50px;margin-top:25px;margin-right:80px;border:1px solid #ddd;font-size:15px;
			color:#ddd;float: right;text-align: center;line-height: 50px;}
		/*导航条商品弹出层*/
		div.header1-1{width:1226px;clear: both;display: none;position: absolute;z-index: -1;margin-top: 100px;border-top:1px solid #ddd;border-bottom:1px solid #ddd;background-color:#fff;}
		div.header1-1 ul li{float: left;text-align: center;margin-left:40px;font-size: 15px;}
		div.header1-1 ul li a{text-decoration: none;}
		div.header1-1 ul li span{display: block;margin-left:40px;margin-right: 40px;margin-bottom: 10px; padding-bottom: 3px; border:1px solid red;font-size: 10px;color: red;}
		div.header1-1 ul li h6{color: red;}
		/*商品名称、参数等详细信息*/
		div.header1-2-0{float: left;width:1226px;height: 60px;}
		div.header1-2{float: left;width:1226px;height: 60px;border-top: 1px solid #ddd;box-shadow: 0px 5px 0px 0px #ddd;background-color: #fff;}
		div.header1-2-1{float: left;margin-left: 5%;}
		div.header1-2-1 ul li{float: left;line-height: 60px;margin-right: 10px;}
		div.header1-2-1 ul li a:hover{color: red;}
		div.header1-2-1 ul li.header1-2-1-li{font-size: 10px;color: #ddd;}

		div.header1-2-2{float: left;margin-left: 40%;font-size: 13px;}
		div.header1-2-2 ul li{float: left;line-height: 60px;margin-right: 10px;}
		div.header1-2-2 ul li a:hover{color: red;}
		div.header1-2-2 ul li.header1-2-2-li{width:90px;background-color: red;text-align: center;line-height: 30px;margin-top: 15px;}
		div.header1-2-2 ul li.header1-2-2-li:hover{background-color: #FF8C00;}
		div.header1-2-2 ul li.header1-2-2-li a{color: #fff;}

		div.h{clear: both;}

		#banner1{width: 100%;height: 580px;float: left;}
		#banner1 { position: relative;overflow: hidden; }
		#banner_list1 img { border: 0px;text-align: center; }
		#banner1 ul { position: absolute; z-index: 0; list-style-type: none; filter: Alpha(Opacity=80); opacity: 0.8; margin: 0; padding: 0; bottom: 3px; right: 5px; }
		#banner1 ul li { padding: 0px 8px; float: left; display: block; color: #FFF; background: #6f4f67; cursor: pointer; border: 1px solid #333; }
		#banner1 ul li.on { background-color: #000; }
		#banner_list1 a { position: absolute; }

		div.content-1{width: 100%;}
		div.content-1 ul li{width: 100%;text-align: center;}

		#banner2{width: 100%;height: 580px;float: left;}
		#banner2 { position: relative;overflow: hidden; }
		#banner_list2 img { border: 0px;text-align: center; }
		#banner2 ul { position: absolute; z-index: 0; list-style-type: none; filter: Alpha(Opacity=80); opacity: 0.8; margin: 0; padding: 0; bottom: 3px; right: 5px; }
		#banner2 ul li { padding: 0px 8px; float: left; display: block; color: #FFF; background: #6f4f67; cursor: pointer; border: 1px solid #333; }
		#banner2 ul li.on { background-color: #000; }
		#banner_list2 a { position: absolute; }

		div.content-2{width:100%;}

		div.content-3{width: 100%;}
		div.content-3 ul li{float: left;margin-bottom: 10px;}
		div.content-3 ul li img{float: left;}
		div.content-3 ul li h1{float: left;color: black; line-height:40px;padding-left: 100px;margin-top:100px;margin-right: 50px;}
		div.content-3 ul li h6{float: left;color: #ddd; line-height:60px;padding-left: 230px;margin-right: 50px;}
		div.content-3-1{width: 600px; float: left;}
		div.content ul li.content-3-1{width: 600px; float: left;}
		div.content ul li.content-3-1 h1{padding-left:225px;}
		div.content ul li.content-3-2{width:610px;float: right;}
		
		div.content-4{padding: 50px;font-size: 10px;color:#ddd; background-color: #FAFAFA;}
		div.site-info{width:100%;}


	</style>
</head>
<body>
	<!-- 导航条开始 -->
	<div class="site-bn-bar">
		<ul>
			<li><a href="">每周五超级秒杀日</a></li>
		</ul>
	</div>
	<div class="site-topbar">
		<div class="site-topbar-left">
			<ul>
				<li><a href="index.html">小米商城</a></li>
				<li class="miu"><a href="">MIUI</a></li>
				<li class="lot"><a href="">IoT</a></li>
				<li class="yun"><a href="">云服务</a></li>
				<li class="jin"><a href="">金融</a></li>
				<li class="you"><a href="">有品</a></li>
				<li><a href="">小爱平台</a></li>
				<li><a href="">政企服务</a></li>
			</ul>
		</div>
		<div class="site-topbar-right">
			<ul>
				<li class="deng"><a href="">登录</a></li>
				<li class="zhu"><a href="">注册</a></li>
				<li class="xiao"><a href="">消息</a></li>
				<li class="gou"><a href=""><img src="./images/gouwuche2.png" width="20px">购物车(0)</a></li>
			</ul>
		</div>
		<div class="site-topbar-right-gou">
			<div class="gou2">购物车中还没有商品，赶紧选购吧!</div>
		</div>
	</div>
	<div class="site-header">
		<div class="header0">
			<a href="index.html"><img src="./images/logo.png"></a>
		</div>
		<div class="header1">
			<ul>
				<li class="xiaomi"><a href="2.html">小米</a></li>
				<li><a href="2.html">红米</a></li>
				<li><a href="2.html">电视</a></li>
				<li><a href="2.html">笔记本</a></li>
				<li><a href="2.html">空调</a></li>
				<li><a href="2.html">新品</a></li>
				<li><a href="2.html">路由器</a></li>
				<li class="hard"><a href="2.html">智能硬件</a></li>
				<li><a href="2.html">服务</a></li>
				<li><a href="2.html">社区</a></li>
			</ul>
		</div>
		<div class="header2">
			小米8&nbsp小米mix2
		</div>
		<div class="header1-1">
			<ul>
				<li><a href="3.html"><span>新品</span><img src="./images/mi8.png" width="150"><br/>小米8<br/><h6>2999元</h6></a></li>
				<li><a href="3.html"><span>新品</span><img src="./images/t_max3.png" width="150"><br/>小米max3<br/><h6>2999元</h6></a></li>
				<li><a href="3.html"><span>新品</span><img src="./images/t_mi6.jpg" width="150"><br/>小米6<br/><h6>2999元</h6></a></li>
				<li><a href="3.html"><span>新品</span><img src="./images/t_mi8se.png" width="150"><br/>小米8se<br/><h6>2999元</h6></a></li>
				<li><a href="3.html"><span>新品</span><img src="./images/t_mix2.png" width="150"><br/>小米mix2<br/><h6>2999元</h6></a></li>
				<li><a href="3.html"><span>新品</span><img src="./images/t_mix2s.png" width="150"><br/>小米mix2s<br/><h6>2999元</h6></a></li>
			</ul>
		</div>
		<div class="header1-2-0">
			<div class="header1-2" id="fix1">
				<div class="header1-2-1">
					<ul>
						<li>小米8</li>
						<li class="header1-2-1-li"><a href="">| 小米8&nbsp透明探索版</a></li>
						<li class="header1-2-1-li"><a href="">| 小米8&nbspSE</a></li>
					</ul>
				</div>
				<div class="header1-2-2">
					<ul>
						<li><a href="">概述</a></li>
						<li><a href="">|&nbsp&nbsp图集</a></li>
						<li><a href="">|&nbsp&nbsp参数</a></li>
						<li><a href="">|&nbsp&nbspF码通道</a></li>
						<li><a href="">|&nbsp&nbsp用户评价</a></li>
						<li class="header1-2-2-li"><a href=""><span>立即购买</span></a></li>
					</ul>
				</div>
			</div>
		</div>
		
		<div class="h"></div>
	</div>
<!-- 导航条结束 -->
<!-- 内容区开始 -->
	<div class="content">
		<div id="banner1">
			<ul>
		    <li class="on">1</li>
		    <li class="on">2</li>
		    <li class="on">3</li>
		    <li class="on">4</li>
		  	</ul>
			<div id="banner_list1"> 
			  <a href=""><img src="./images/3mi8-1.jpg"/></a> 
			  <a href=""><img src="./images/3mi8-2.jpg"/></a>
			  <a href=""><img src="./images/3mi8-3.jpg"/></a>
			  <a href=""><img src="./images/3mi8-2.jpg"/></a>
			</div>
		</div>
		<div class="content-1">
			<ul>
				<li><img src="./images/3mi8-4.png"></li>
			</ul>
		</div>
		<div id="banner2">
			<ul>
		    <li class="on">1</li>
		    <li class="on">2</li>
		    <li class="on">3</li>
		    <li class="on">4</li>
		  	</ul>
			<div id="banner_list2"> 
			  <a href="3.html"><img src="./images/3mi8-border1.jpg"/></a> 
			  <a href="3.html"><img src="./images/3mi8-border2.jpg"/></a> 
			  <a href="3.html"><img src="./images/3mi8-border3.jpg"/></a> 
			  <a href="3.html"><img src="./images/3mi8-border4.jpg"/></a> 
			</div>
		</div>
		<div class="content-2">
			<ul>
				<li><img src="./images/3mi8-6.png"></li>
				<li><img src="./images/3mi8-5.png"></li>
				<li><img src="./images/3mi8-7.png"></li>
			</ul>
		</div>
		<div class="content-3">
			<ul>
				<li><img src="./images/3mi8-8.png" width="610"><h1>“小爱同学”AI语音助手</h1><h6>一句话搞定复杂操作</h6></li>
				<li class="content-3-1"><h1>多功能NFC</h1><h6>已支持167城公共交通出行</h6></li>
				<li class="content-3-2"><img src="./images/3mi8-9.png" width="610"></li>
		</div>
		<div class="h"></div>
		<div class="content-4">
			<p>数据说明：<br/>
本页产品的配置信息、主板及相关图片均以顶配版为主进行宣传，具体性能及数据根据型号不同存在差异，如需了解更多机型配置请查阅参数页。屏占⽐依据测量方式不不同，实际结果可能略有差异，数据来⾃⼩米实验室测试数据；3400mAh 电池为小米8 手机 typ 典型值, 与小米8 透明探索版电池容量有差异；手机支持 QC4+ 快充协议，标配 18W QC3.0 充电器；屏幕实际尺寸为 6.21 英寸，由于全面屏的高屏占比，机身三维尺寸相当于传统小米 5.5 英寸手机大小，手感轻薄舒适；小米手机 8 采用博通 47755 双频 GPS 芯片，成为全球首款支持双频 GPS 手机；DXO 手机相机评分详情见链接：https://www.dxomark.com/cn/；“AI 短视频剪辑……一键生成好莱坞式精彩影片”话术，指短视频编辑功能的智能性、时尚性、便捷性，并非实指由好莱坞出产的影片；AI 影棚光效、短视频剪辑功能，会通过后续 OTA 支持，更新进度最终以 MIUI官网公布、MIUI 稳定版功能更新为准；206 种场景由25类标签场景细分所得，在使用过程中通过AI相机调校效果可主观感知；4 合 1 相机是指前置相机在暗光环境下，可以 4 颗像素合为一颗 1.8μm 大像素；AI “微整形”美颜，指通过 3D 高精网状面部打点，深度学习面部骨骼特征，在图片处理上注重立体五官轮廓塑造，和微整形实现立体性的目的相一致；骁龙 845 处理器 Antutu 30万跑分，数据来自于小米实验室；“红外人脸识别，全黑环境，疾速解锁”面部识别结果出自小米实验室，具体实验环境为封闭室内环境，遮蔽正常自然光线与人造光源；多功能 NFC：门卡模拟仅能模拟未经加密且频段为 13.56MHz 的门卡，带有门卡功能的银行卡和储值消费、公交消费等功能的门卡暂时不能被模拟，即使模拟成功，这些卡片也不具备银行、公交等功能；Mi Pay支持60家主流银行；在初期销售批次手机中，小米公交支持京津冀互联互通卡、重庆畅通卡、上海公共交通卡3张交通卡，其它城市上线由于技术条件、城市等有所差异，以产品完成测试时间为准。小米8 透明探索版的公交和Mi Pay陆续支持中，正式上线后将通过小米钱包官方网站（www.mipay.com）公布；小米8 透明探索版展示元件并非与手机元器件一一对应；安卓首款“Face ID” 是指首次在安卓手机上，基于 ToF 距离感应器、红外镜头、泛光照明器、投影器组成的面部识别系统，实现基于 3D 结构光的人脸识别技术；“全球首款压感屏幕指纹识别” 是指基于光学指纹识别技术，对比普通屏幕指纹，增加压感触发机制，通过高灵敏压感传感器识别手指压力，触发解锁机制；“Face ID”3D结构光面部识别、压感屏幕指纹识别解锁、米萌动画表情、透明玻璃机身，均为小米8 透明探索版所独有功能点；米萌动画表情后续OTA支持；页面中所对比的一般手机，均为小米自有手机；小米8 产品站非特别指出，均为我司实验室数据、设计技术参数及供应商提供数据，全站数据实际情况会因测试软件版本、具体测试环境、具体版本不同，而略有差异。全站所展示结构图片，均为功能示意图，并非绝对实际结构，最终以实物为准。</p>
		</div>

	</div>
<!-- 内容区结束 -->
<!-- 页脚开始 -->
	<div class="site-footer">
		<img src="./images/foot0.png">
	</div>
<!-- 页脚结束 -->
	<div class="site-info">
		<img src="./images/foot.png">
	</div>
	
	<script type="text/javascript">
		//固定导航条在顶部
		var div1_height = $("#fix1").offset().top; //获取fix1的高度
		//滚动处理div
		$(window).scroll(function() {
			var this_scrollTop = $(this).scrollTop();

			//div1
			if (this_scrollTop > div1_height) {
				$("#fix1").css({
					"position": "fixed",
					"top": "0px",
					"z-index":1
				});
			}
			if (this_scrollTop < div1_height) {
				$("#fix1").css({
					"position": "absolute",
					"top": div1_height
				});
			}
		});
	</script>
	
</body>
</html>